<template>
  <div class="second-comp">
    <el-card shadow="hover">
      <template #header>
        <!-- 1. 菜单 -->
        <el-menu
          mode="horizontal"
          :default-active="activeIndex"
          @select="handleSelect"
        >
          <el-menu-item index="1">销售额</el-menu-item>
          <el-menu-item index="2">访问量</el-menu-item>
        </el-menu>
        <div class="right">
          <!-- 2. 按钮组 -->
          <el-radio-group v-model="radio">
            <el-radio-button label="今日" value="今日"></el-radio-button>
            <el-radio-button label="本周" value="本周"></el-radio-button>
            <el-radio-button label="本月" value="本月"></el-radio-button>
            <el-radio-button label="今年" value="今年"></el-radio-button>
          </el-radio-group>
          <!-- 3. 日期选择 -->
          <el-date-picker
            type="daterange"
            v-model="dateRange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="shortcuts"
          ></el-date-picker>
        </div>
      </template>
      <template #default>
        <div class="container">
          <div class="left-chart">
            <v-chart :option="option"></v-chart>
          </div>
          <div class="right-list">
            <div class="title">排行榜</div>
            <div class="list-item" v-for="item in rankLists">
              <span
                :class="{
                  highlight: item.no <= 3,
                }"
              >
                {{ item.no }}
              </span>
              <span>{{ item.title }}</span>
              <span>{{ item.sales }}</span>
            </div>
          </div>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getSalesData } from "@/api/index.js";

const activeIndex = ref("1");
const radio = ref("今日");
const dateRange = ref("");
const option = ref({});

const salesData = ref([]);
const rankLists = ref([]);

const shortcuts = [
  {
    text: "最近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "最近一月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "最近三月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];

const renderChart = (v1, v2) => {
  option.value = {
    title: {
      text: "年度销售额",
      textStyle: {
        fontSize: 14,
      },
    },
    grid: {
      left: 40,
    },
    xAxis: {
      type: "category",
      data: v2,
      // x轴的刻度对齐label标签
      axisTick: {
        alignWithLabel: true,
      },
    },
    yAxis: {
      type: "value",
      // y轴的刻度线设置为虚线
      splitLine: {
        lineStyle: {
          type: "dotted",
        },
      },
    },
    series: {
      type: "bar",
      data: v1,
      barWidth: "40%",
      // item的颜色
      itemStyle: {
        color: "skyblue",
      },
    },
  };
};

const handleSelect = (index) => {
  const {
    saleFulleYear,
    saleFulleYearAxis,
    saleRank,
    visitFullYear,
    visitFullYeadAxis,
    visitRank,
  } = salesData.value;

  if (index === "1") {
    renderChart(saleFulleYear, saleFulleYearAxis);
    rankLists.value = saleRank;
  } else if (index === "2") {
    renderChart(visitFullYear, visitFullYeadAxis);
    rankLists.value = visitRank;
  }
};
onMounted(async () => {
  salesData.value = await getSalesData();
  const { saleFulleYear, saleFulleYearAxis, saleRank } = salesData.value;

  // 渲染图表
  renderChart(saleFulleYear, saleFulleYearAxis);

  // 渲染列表
  rankLists.value = saleRank;
});
</script>

<style lang="scss" scoped>
.second-comp {
  position: relative;
  margin-top: 20px;
  :deep(.el-card__header) {
    padding: 0;
    border: none;
    .el-menu {
      padding-left: 50px;
    }
    .right {
      position: absolute;
      top: 15px;
      right: 2px;
      font-size: 0;
      .el-radio-group {
        margin-right: 10px;
      }
    }
  }
  .container {
    display: flex;
    .left-chart {
      flex: 0 0 70%;
      height: 434px;
    }
    .right-list {
      flex: 1;
      .title {
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 600;
      }
      .list-item {
        margin: 20px 0;
        display: flex;
        align-items: center;
        gap: 20px;
        span {
          font-size: 14px;
          color: #464545;
          &:nth-child(1) {
            width: 20px;
            height: 20px;
            border-radius: 10px;
            text-align: center;
            line-height: 20px;
          }
          &:nth-child(2) {
            flex: 1;
          }
          &.highlight {
            background-color: #09b3f7;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
